<template>
  <div>
    <div>
      <!-- 页头 -->
      <div class="back">
        <i class="el-icon-back" @click="$router.go(-1)"></i>
        <span style="padding: 10px; color: rgba(0, 0, 0, 0.15)">|</span>
        <span style="font-size: 20px; font-weight: 500; color: #2f343e"
          >编辑情报</span
        >
      </div>
      <!-- 主题 -->
      <div class="box-top">
        <div
          style="
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 550;
            margin-bottom: 20px;
          "
        >
          基本信息
        </div>
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="120px"
          label-position="left"
        >
          <div style="display: flex">
            <div class="content-box-left">
              <el-form-item label="IP:">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入"
                  style="width: 370px; margin-left: 0px"
                />
              </el-form-item>
              <el-form-item label="地理位置:">
                <el-input
                  v-model="formData.cronType"
                  placeholder="请输入"
                  style="width: 370px; margin-left: 0px"
                />
              </el-form-item>
              <el-form-item label="AS:">
                <el-input
                  v-model="formData.as"
                  placeholder="请输入"
                  style="width: 370px; margin-left: 0px"
                />
              </el-form-item>
              <el-form-item label="来源：">
                <el-select
                  v-model="formData.timeNode"
                  placeholder="选择情报来源"
                  style="width: 370px; margin-left: 0px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="content-box-right">
              <el-form-item label="Tags:">
                <el-select
                  v-model="formData.tags"
                  placeholder="请选择"
                  style="width: 370px; margin-left: 0px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="开放端口:">
                <el-input
                  v-model="formData.cycleNode"
                  placeholder="请输入"
                  style="width: 370px; margin-left: 0px"
                />
              </el-form-item>
              <el-form-item label="更新时间:">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入"
                  style="width: 370px; margin-left: 0px"
                />
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <!-- 中间盒子 -->
      <div class="box-content">
        <div
          style="
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 550;
            margin-bottom: 20px;
          "
        >
          威胁情报
        </div>
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="120px"
          label-position="left"
        >
          <el-form-item
            label="规则配置:"
            style="margin-left: 92px; margin-top: 13px"
          >
            <HkTable
              ref="table"
              :loading="loading"
              :table-data="arrList"
              :table-columns="tableLabelList"
              :is-need-index="true"
              style="width: 90%"
            >
              <!-- 来源 -->
              <template #name="scope">
                {{ scope.row.name }}
                <div>
                  <el-input
                    v-model="formContent.name"
                    placeholder="请输入"
                    style="width: 190px; margin-left: 27px"
                  >
                  </el-input>
                </div>
              </template>
              <!-- 分类 -->
              <template #datasourceName="scope">
                {{ scope.row.datasourceName }}
                <div>
                  <el-select
                    v-model="formContent.cronType"
                    placeholder="请选择"
                    style="width: 190px; margin-left: 27px"
                  >
                  </el-select>
                </div>
              </template>
              <!-- 家族 -->
              <template #outputDatasourceName="scope">
                {{ scope.row.name }}
                <div>
                  <el-input
                    v-model="formContent.as"
                    placeholder="请输入"
                    style="width: 190px; margin-left: 27px"
                  >
                  </el-input>
                </div>
              </template>
              <!-- 组织 -->
              <template #people="scope">
                {{ scope.row.name }}
                <div>
                  <el-input
                    v-model="formContent.tags"
                    placeholder="请输入"
                    style="width: 190px; margin-left: 27px; margin-right: 27px"
                  >
                  </el-input>
                </div>
              </template>
               <!-- 更新时间 -->
              <template #time="scope">
                {{ scope.row.name }}
                <div>
                 <span style="width: 190px; margin-left: 27px">2022-12-25</span>
                </div>
              </template>
            </HkTable>
          </el-form-item>
        </el-form>
      </div>

      <!-- 下面盒子 -->
      <div class="box-content1">
        <div
          style="
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 550;
            margin-bottom: 20px;
          "
        >
          关联情报
        </div>
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="120px"
          label-position="left"
        >
          <!-- 关联域名 -->
          <el-form-item
            label="关联域名:"
            style="margin-left: 92px; margin-top: 13px"
          >
            <HkTable
              ref="table"
              :loading="loading"
              :table-data="nameList"
              :table-columns="tableNameList"
              :is-need-index="true"
              style="width: 90%"
            >
              <!-- 域名 -->
              <template #name="scope">
                {{ scope.row.name }}
                <div>
                  <el-input
                    v-model="formBottom.name"
                    placeholder="请输入"
                    style="width: 600px; margin-left: 27px"
                  >
                  </el-input>
                </div>
              </template>
              <!-- 发现时间 -->
              <template #people="scope">
                {{ scope.row.name }}
                <div>
                  <el-date-picker
                    v-model="formBottom.cronType"
                    align="right"
                    type="date"
                    placeholder="请选择时间"
                    style="width: 190px; margin-left: 27px; margin-right: 27px"
                  >
                  </el-date-picker>
                </div>
              </template>
            </HkTable>
          </el-form-item>
        </el-form>
       
      </div>
       <div class="box-content1">
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="120px"
          label-position="left"
        >
          <!-- 关联域名 -->
          <el-form-item
            label="关联URL:"
            style="margin-left: 92px; margin-top: 13px"
          >
            <HkTable
              ref="table"
              :loading="loading"
              :table-data="urlList"
              :table-columns="tableUrlList"
              :is-need-index="true"
              style="width: 90%"
            >
              <!-- URL -->
              <template #name="scope">
                {{ scope.row.name }}
                <div>
                  <el-input
                    v-model="formBottom.as"
                    placeholder="请输入"
                    style="width: 370px; margin-left: 27px"
                  >
                  </el-input>
                </div>
              </template>
                <!-- 威胁等级 -->
              <template #datasourceName="scope">
                {{ scope.row.name }}
                <div>
                  <el-input
                    v-model="formBottom.tags"
                    placeholder="请输入"
                    style="width: 190px; margin-left: 27px"
                  >
                  </el-input>
                </div>
              </template>
              <!-- 发现时间 -->
              <template #people="scope">
                {{ scope.row.name }}
                <div>
                  <el-date-picker
                    v-model="formBottom.cronType"
                    align="right"
                    type="date"
                    placeholder="请选择时间"
                    style="width: 190px; margin-left: 27px; margin-right: 27px"
                  >
                  </el-date-picker>
                </div>
              </template>
            </HkTable>
          </el-form-item>
        </el-form>
       
      </div>
        <div class="box-content1">
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="120px"
          label-position="left"
        >
          <!-- 关联样本 -->
          <el-form-item
            label="关联样本:"
            style="margin-left: 92px; margin-top: 13px"
          >
            <HkTable
              ref="table"
              :loading="loading"
              :table-data="bookList"
              :table-columns="tableBookList"
              :is-need-index="true"
              style="width: 90%"
            >
              <!-- 样本 -->
              <template #name="scope">
                {{ scope.row.name }}
                <div>
                  <el-input
                    v-model="formBottom.cycleNode"
                    placeholder="请输入"
                    style="width: 370px; margin-left: 27px"
                  >
                  </el-input>
                </div>
              </template>
                <!-- 威胁等级 -->
              <template #datasourceName="scope">
                {{ scope.row.name }}
                <div>
                  <el-input
                    v-model="formBottom.tags"
                    placeholder="请输入"
                    style="width: 190px; margin-left: 27px"
                  >
                  </el-input>
                </div>
              </template>
              <!-- 发现时间 -->
              <template #people="scope">
                {{ scope.row.name }}
                <div>
                  <el-date-picker
                    v-model="formBottom.cronType"
                    align="right"
                    type="date"
                    placeholder="请选择时间"
                    style="width: 190px; margin-left: 27px; margin-right: 27px"
                  >
                  </el-date-picker>
                </div>
              </template>
            </HkTable>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$router.go(-1)">取 消</el-button>
      <el-button type="primary" @click="$router.go(-1)">提 交</el-button>
    </div>
  </div>
</template>
<script>
import HkTable from "@/components/HKTable";

export default {
  components: { HkTable },
  data() {
    return {
      cycleNodeOption: [],
      formData: {
        name: "185.198.59.121",
        cronType: "罗马尼亚，布加勒斯特，布加勒斯特，Host Sailor Ltd",
        as: "60117()",
        timeNode: "国家互联网应急中心(CNCERT)",
        tags: "漏洞利用",
        cycleNode: "8012",
        cycleTime: "2023-03-28",
      },
      formContent:{
        name: "VenusEye(1)",
        cronType: "漏洞利用",
        as: "-",
        tags: "-",
      },
      formBottom:{
        name: "pakket.digital",
        cronType: "2020-12-25",
        as: "https://pakket.digital/DHL.html",
        tags: "100",
        cycleNode: "sjksjfoejflsjfskfjkdfefdsf5631iosiocjdb318",
      },
      // 表单参数
      rules: {
        name: [
          { required: true, message: "作业名称不能为空", trigger: "blur" },
        ],
        type: [{ required: true, message: "请选择作业类型", trigger: "blur" }],
        cycleTime: [{ required: true, message: "请选择", trigger: "blur" }],
        timeNode: [{ required: true, message: "请选择", trigger: "blur" }],
        day: [{ required: true, message: "请选择", trigger: "blur" }],
        times: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      //   表头名称
      tableLabelList: [
        { label: "来源", param: "name", type: "slot", width: "240px" },
        {
          label: "分类",
          param: "datasourceName",
          type: "slot",
          width: "240px",
        },
        {
          label: "家族",
          param: "outputDatasourceName",
          type: "slot",
          width: "240px",
        },
        { label: "组织", param: "people", type: "slot" ,width: "240px",},
        { label: "更新时间", param: "time",type: "slot"},
      ],
      arrList: [
        {
          name: "",
          datasourceName: "",
          outputDatasourceName: "",
          people: "",
          time:"2022-12-25"
        },
      ],
      // 域名
      tableNameList: [
        { label: "域名", param: "name", type: "slot", width: "650px" },
        { label: "发现时间", param: "people", type: "slot" },
      ],
      nameList: [
        {
          name: "",
          datasourceName: "",
          outputDatasourceName: "",
          people: "",
        },
      ],
      // URL
      tableUrlList: [
        { label: "URL", param: "name", type: "slot", width: "420px" },
        { label: "威胁等级", param: "datasourceName", type: "slot",width: "230px" },
        
        { label: "扫描时间", param: "people", type: "slot" },

      ],
      urlList: [
        {
          name: "",
          datasourceName: "",
          outputDatasourceName: "",
          people: "",
        },
      ],
      // 样本
        tableBookList: [
        { label: "HASH", param: "name", type: "slot", width: "420px" },
        { label: "威胁等级", param: "datasourceName", type: "slot",width: "230px" },
        { label: "检测时间", param: "people", type: "slot" },
      ],
      bookList: [
        {
          name: "",
          datasourceName: "",
          outputDatasourceName: "",
          people: "",
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.back {
  margin-bottom: 20px;
}
.box-top {
  background-color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
  .content-box-left {
    margin-left: 92px;
  }
  .content-box-right {
    margin-left: 160px;
    
  }
}
.box-content {
  background-color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
  // height: 220px;
}
.box-content1 {
  background-color: #ffffff;
  padding: 20px;
  // margin-bottom: 20px;
  
  height: 200px;
}
.son-panel {
  display: flex !important;
}
.dialog-footer {
  margin-top: 100px;
  // margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
  background-color: #ffffff;
  padding: 14px 20px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
::v-deep {
  .el-form-item--medium .el-form-item__content {
    margin-bottom: 20px;
  }
  .box-top[data-v-1a8a03f8] {
    padding-bottom: 11px;
  }
  .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-form-item__content {
    line-height: 0px;
  }
  .el-pagination {
    display: NONE;
  }
  .el-form-item--medium .el-form-item__label {
    margin-top: -2px;
  }
  .el-table th.el-table__cell > .cell {
    padding-left: 37px;
  }
  .el-textarea__inner {
    resize: none;
  }
  .el-input--medium .el-input__icon {
    margin-left: 153px;
  }
}
</style>
